import tools from '../../../utils/tools';
import Handle from './Handle';

//专门管理绑定事件处理函数
export default class Event {
  constructor(oList, courseData, cartData, observer) {
    this.oList = oList;
    this.courseData = courseData;
    this.cartData = cartData;
    this.observer = observer;
    //找出所有课程列表里的按钮
    this.oAddBtns = this.oList.getElementsByClassName('add-btn');

    this.init();
  }

  init() {
    this.bindEvent();
    this.handle = new Handle(this.courseData, this.cartData, this.oAddBtns, this.observer);
  }

  bindEvent() {
    this.oList.addEventListener('click', this.onAddBtnClick.bind(this), false);
  }

  onAddBtnClick(ev) {
    const tar = tools().getTarget(ev),
      className = tar.className;

    // console.log(className);
    //add-btn

    if (className === 'add-btn') {
      const id = tar.getAttribute('data-id');
      // console.log(id); 2/3/4/5

      //单独执行观察者函数
      //setState() 点击加入购物车按钮时修改state属性，且将加入的数据添加到cartData里 点击按钮修改按钮文本内容且显示或变灰色
      //setAddBtnState() 
      //参数1：当前环境this 
      //参数2：handle底下setState/setAddBtnState所需要的参数

      //此处一个notify函数的执行同时 把handle底下的所有函数同时执行，实现参数实时共享 好处是模块功能同时联动
      this.observer.notify(this, id, tar, 1);
    }
  }
}